<template>
  <div>
    <newPageHeader></newPageHeader>
    <div class="mainClass">
      <img class="mainImg" src="@img/yue/c.png" alt="" />
      <div class="content">
        <div class="contentPad">
          <div class="titleDiv">定制服务的初衷</div>
          <div class="textFirst">
            线上海事展”（简称：海事展）的“线下定制服务”（简称：定制服务），是为了丰富海事展的服务功能、满足参展商的个性化需求，将“线上展会优势”与“线下服务特色”相结合，向参展商会员提供“全面贴合需求、更加直观高效”的个性化服务体验。实现“举办海事展、服务参展商”的初衷——构建诚信生态、实现互惠共赢。
          </div>
          <div class="titleDiv">定制服务的类型</div>
          <div class="title2 mt26">当前预设的定制服务（内容见下表）；</div>
          <div class="title2">个性化协议定制服务（需具体协商）；</div>
          <div class="titleDiv mt48">定制服务的对象</div>
          <div class="title2 mt26">
            ✓ 拥有产品或授权代理权限且线下经营满三年或以上的；
          </div>
          <div class="title2">
            ✓ 有线下定制服务需求且同意按《服务协议》条件执行的；
          </div>
          <div class="title2">
            ✓ 有线下定制服务需求且同意按《服务协议》条件执行的；
          </div>
          <div class="title2">
            ✓ 提供三年或以上企业成交额（线下、总额，不含单价等）；
          </div>
          <div class="title2">
            ✓ 自愿参与“企业风险评估”（诚信排行榜排位高者优先）；
          </div>
          <div class="title2">
            ✓ 已缴纳一年或以上参展费（取得展会会员资格）参展商；
          </div>
          <div class="titleDiv mt48">当前预设的定制服务</div>
          <div v-for="item in info" class="item" :key="item.id">
            <div class="itemClass">
              <img
                class="checkImg"
                v-if="!item.checked"
                @click="
                  () => {
                    item.checked = true;
                  }
                "
                src="@img/yue/ch.png"
                alt=""
              />
              <img
                class="checkImg"
                v-if="item.checked"
                @click="
                  () => {
                    item.checked = false;
                  }
                "
                src="@img/yue/c1.png"
                alt=""
              />
              <span class="titlename">{{ item.title }}</span>
            </div>
            <div class="itemdesc">{{ item.desc }}</div>
            <div class="options" v-for="op in item.children" :key="op.label">
              <img
                class="smallcheckImg"
                v-if="!op.checked"
                @click="
                  () => {
                    op.checked = true;
                  }
                "
                src="@img/yue/ch.png"
                alt=""
              />
              <img
                class="smallcheckImg"
                v-if="op.checked"
                @click="
                  () => {
                    op.checked = false;
                  }
                "
                src="@img/yue/c1.png"
                alt=""
              />
              <span>{{ op.label }}</span>
            </div>
          </div>
        </div>
        <div class="content-buttom">
          <div class="inputItem mt40">
            <div class="label">
              <span class="red">*</span><span>姓名</span>
            </div>
            <el-input
              v-model="name"
              class="width630"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </div>
          <div class="inputItem ">
            <div class="label">
              <span class="red">*</span><span>联系电话</span>
            </div>
            <el-input
              v-model="phone"
              class="width630"
              placeholder="请输入联系电话"
              clearable
            ></el-input>
          </div>
          <div class="inputItem ">
            <div class="label">
              <span class="red">*</span><span>单位名称</span>
            </div>
            <el-input
              v-model="unit"
              class="width630"
              placeholder="请输入单位名称"
              clearable
            ></el-input>
          </div>
          <div class="inputItem ">
            <div class="label">
              <span class="red">*</span><span>邮箱</span>
            </div>
            <el-input
              v-model="email"
              class="width630"
              placeholder="请输入邮箱"
              clearable
            ></el-input>
          </div>
          <div class="inputItem ">
            <div class="savebtn" @click="saveFunc">提交</div>
          </div>
        </div>
      </div>
    </div>

    <newPageFooter></newPageFooter>
  </div>
</template>

<script>
import newPageHeader from "../../components/page/engineering5188/new-page-header.vue";
import newPageFooter from "../../components/page/engineering5188/new-page-footer.vue";
export default {
  components: {
    newPageHeader,
    newPageFooter,
  },
  data() {
    return {
      reputationData: [
        // 商家口碑排行榜数据
      ],
      recommendProducts: [],
      transactionData: [
        // 交易排行榜数据
      ],
      info: [],
      name:'',
      phone:'',
      unit:'',
      email:''
    };
  },
  created() {
    this.getWordList();
  },
  methods: {
    saveFunc(){
      if(this.name==''){
        alertErr('请输入姓名')
        return;
      }
      if(this.phone==''){
        alertErr('请输入联系电话')
        return;
      }
      if(this.unit==''){
        alertErr('请输入单位名称')
        return;
      }
      if(this.email==''){
        alertErr('请输入邮箱')
        return;
      }
      // 新增邮箱格式校验
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if(!emailPattern.test(this.email)){
        alertErr('请输入有效的邮箱地址')
        return;
      }
      let data=[];
      for(let i=0;i<this.info.length;i++){
        let obj={};
        obj.id = this.info[i].id;
        obj.title = this.info[i].title;
        obj.checked = this.info[i].checked?1:0;
        obj.children = [];
        for(let j=0;j<this.info[i].children.length;j++){
          if(this.info[i].children[j].checked){
            obj.children.push(this.info[i].children[j].label);
          }
        }

        data.push(obj);
      }
      
      this.$httpApi("/api/cusAnswer",{content: JSON.stringify(data),name:this.name,phone:this.phone,company:this.unit,email:this.email}, "post").then((res) => {
        if (res.code == 200) {
          alertSucc(res.msg);
        } else {
          alertErr(res.msg);
        }
      })
    },
    getWordList() {
      //getCusQuestions
      this.$httpApi("/api/getCusQuestions", {}, "get").then((res) => {
        if (res.code == 200) {
          res.data.forEach((v) => {
            v.checked = false;
            v.children = [];
            v.options.forEach((vv) => {
              v.children.push({
                label: vv,
                checked: false,
              });
            });
          });
          this.info = res.data;
          console.log(this.info, "dedede");
        } else {
          alertErr(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mainClass {
  background: #dee7fc;
  width: 100%;
  position: relative;
}
.mainImg {
  width: 100%;
  height: 610px;
  object-fit: cover;
}
.content {
  width: 1200px;
  background: #ffffff;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.2);
  border-radius: 36px 36px 36px 36px;
  border: 5px solid #587af0;
  margin-top: -200px;
  z-index: 999;
  position: relative;
  margin: 0 auto;
  transform: translateY(-200px);
}
.contentPad {
  padding: 74px 113px 66px 87px;
}
.titleDiv {
  background-image: url("../../assets/img/yue/2.png");
  width: 323px;
  height: 68px;
  background-size: 100% 100%;
  font-weight: 400;
  font-size: 32px;
  color: #ffffff;
  line-height: 68px;
  text-indent: 20px;
}

.textFirst {
  font-weight: 500;
  font-size: 18px;
  color: #0f0f0f;
  line-height: 36px;
  margin-top: 24px;
  margin-bottom: 48px;
}

.mt26 {
  margin-top: 26px;
}
.mt48 {
  margin-top: 48px;
}
.title2 {
  width: 560px;
  height: 40px;
  background: linear-gradient(270deg, rgba(236, 214, 162, 0) 0%, #ecd6a2 100%);
  border-radius: 20px 20px 20px 20px;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  line-height: 40px;
  text-indent: 20px;
  margin-bottom: 6px;
}
.checkImg {
  width: 28px;
  height: 28px;
  margin-right: 15px;
  cursor: pointer;
}
.titlename {
  font-weight: 500;
  font-size: 22px;
  color: #0d0d0d;
}
.itemdesc {
  margin-left: 40px;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  line-height: 24px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.options {
  width: 916px;
  height: 48px;
  background: #fafafa;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #e6e6e6;
  line-height: 48px;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  padding-left: 20px;
  margin-left: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.smallcheckImg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}
.item {
  margin-top: 20px;
}

.content-buttom {
  width: 1190px;
  height: 419px;
  background: #f5f8ff;
  border-radius: 0px 0px 36px 36px;
  
}
.label {
  width: 200px;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  text-align: right;
}
.red {
  color: #ff0000;
}
.width630 {
  width: 630px;
  margin-left: 10px;
}
.inputItem {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.mt40{
    padding-top: 40px;
}
.savebtn{
    width: 400px;
height: 44px;
background: #014BC4;
box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.05);
border-radius: 4px 4px 4px 4px;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
line-height: 44px;
cursor: pointer;
margin-top: 40px;
text-align: center;
}
</style>
